<!-- 下标tab控制类 -->
<template>
  <v-ons-page>


    <v-ons-tabbar position="auto" animation="none"
      :tabs="tabs"
      :visible="true"
      :index.sync="activeIndex"
    >
    </v-ons-tabbar>


  </v-ons-page>
</template>

<script>

import Home from '../home/Home.vue';
import News from '../news/News.vue';
import Message from '../message/Message.vue';

export default {
  name: 'tabbar',
  props: ['pageStack', 'setTabbarIndex', 'setMenuIsOpen'],
  data() {
    return {
      activeIndex: 0,
      tabs: [
        {
          icon: 'ion-home',
          label: 'Home',
          page: Home,
          props: {
            myProp: 'This is a page prop!'
          },
          key: "HomePage"
        },
        {
          icon: 'ion-ios-bell',
          label: 'News',
          page: News,
          badge: 7,
          key: "NewsPage"
        },
        {
          icon: 'ion-email',
          label: 'Messager',
          page: Message,
          badge: 0,
          key: "Message"
        }
        
      ]
    };
  },
  methods: {
    goTo (url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  text-align: center;
}

img {
  max-width: 300px;
}

ons-list-title {
  text-transform: none;
}

ons-list-title:not(:first-of-type) {
  margin-top: 30px;
}

ons-card {
  text-align: center;
}

ons-list-item, ons-card {
  cursor: pointer;
}
</style>
